<template>
	<view class="main">
		<view class="tit-bg" :style="{ 'background-image': `url(${bg})` }">
			<view class="">
				<alltitleVue :title="title" :url="url" />
			</view>

			<view class="info-tit">
				<image :src="details.photoUrl" mode=""></image>
				<!-- <image src="../../static/home/one.png" mode=""></image> -->
				<view class="top-text">
					<view class="text-info">
						<text class="name">{{details.name}}</text>
						<text class="level">{{details.dictLabel}}</text>
						<text class="su">|</text>
						<text class="office">{{details.title}}</text>
					</view>
					<view class="real-name">
						<view class="">
							<text>好评率</text>
							<text>99.85%</text>
						</view>
						<view class="">
							<text>问诊数</text>
							<text>{{details.virtuals?details.virtuals:0}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="time">
			<view class="time-item" v-for="(item,index) in nextSevenDays" :key="index" @click="selecTime(item,index)">

				<view class="week" :class="{'color-h':isindex==index}">
					{{item.weekday}}
				</view>
				<view class="month">

					<view class="day" :class="{'day-box':isindex==index}">
						{{item.dayOnly}}
					</view>

				</view>
			</view>
		</view>

		<view class="reservationCard-box">
			<view class="reservationCard">
				<view class="card-left">
					<view class="left-top">
						<view class="top-txt">
							{{selecDays}}
						</view>
						<view class="top-btn"
							v-if="nextSevenDays[isindex].weekday=='今天' || nextSevenDays[isindex].weekday=='明天'">
							{{nextSevenDays[isindex].weekday}}
						</view>
					</view>
					<view class="left-bot">
						<view class="">
							{{details.title}}
						</view>
						<view class="">
							{{details.price>0?`￥${details.price}/次`:'免费'}}
						</view>
					</view>
				</view>
				<view class="btn" @click="nowBook">
					立即预约
				</view>
			</view>
		</view>
		<view class="wenxi">
			温馨提示：突发情况会导致医生门诊时间、挂号费用的改变，请以医院信息为准。
		</view>

	</view>
</template>

<script>
	import config from "../../utils/config";
	export default {
		data() {
			return {
				title: "预约信息",
				isindex: 0,
				selecDays: "",
				//背景大图
				bg: config.ossHost + '2024/12/31/1ec0168fb12c4439890d9b76ea0da037.png',
				day: "",
				details: {},
			};
		},
		onLoad(options) {
			if (options.item) {
				this.details = JSON.parse(options.item)
			}
		},
		computed: {
			nextSevenDays() {
				const days = [];
				const today = new Date(); // 获取今天的日期

				// 自定义星期几名称
				const weekdays = ['日', '一', '二', '三', '四', '五', '六'];

				for (let i = 0; i < 7; i++) {
					const nextDay = new Date(today); // 创建一个新的日期对象，避免修改原始的 today
					nextDay.setDate(today.getDate() + i); // 设置新日期为今天加上 i 天

					// 获取日（day）
					const day = nextDay.getDate();

					// 格式化日期：只保留日部分
					const dayOnly = `${day < 10 ? '0' + day : day}`; // 保证日期两位数显示

					// 获取完整日期：年月日
					const year = nextDay.getFullYear();
					const month = nextDay.getMonth() + 1; // getMonth 返回值是从 0 开始的，所以加 1
					const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;

					// 获取周几
					let formattedWeekday = '';
					let formattedWeekdays = "";
					if (i === 0) {
						formattedWeekday = '今天'; // 今天
					} else if (i === 1) {
						formattedWeekday = '明天'; // 明天
					} else {
						const weekdayIndex = nextDay.getDay(); // 获取星期几，返回值是 0（周日）到 6（周六）
						formattedWeekday = `周${weekdays[weekdayIndex]}`; // 手动拼接中文星期
					}
					const weekdayInd = nextDay.getDay();
					formattedWeekdays = `周${weekdays[weekdayInd]}`;
					// 将完整日期、日部分和周几封装成对象并加入数组
					days.push({
						dayOnly, // 只显示日部分，例如：25
						day: `${formattedDate}`, // 完整日期，例如：2024-10-20
						fullDate: `${formattedDate} ${formattedWeekday}`, // 完整日期格式：2024-10-20 周天
						fullDates: `${formattedDate} ${formattedWeekdays}`,
						weekday: formattedWeekday, // 今天，明天或者周几
					});
				}

				return days;
			}
		},
		mounted() {

			if (this.nextSevenDays.length > 0) {
				this.selecDays = this.nextSevenDays[this.isindex].fullDates;
				this.day = this.nextSevenDays[this.isindex].day;
			}
		},
		methods: {
			//选中时间
			selecTime(item, index) {
				this.selecDays = item.fullDates
				this.day = item.day
				this.isindex = index;
			},
			//立即预约
			nowBook() {
				this.details.selecDays = this.selecDays;
				this.details.day = this.day;
				uni.navigateTo({
					url: `/integration/information/index?item=${JSON.stringify(this.details)}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #fff;
		height: 100vh;
	}

	.tit-bg {
		height: 360rpx;

		width: 100%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.info-tit {
		width: 622rpx;
		background: #fff;
		margin: auto;
		display: flex;
		align-items: center;
		padding: 24rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}

		.top-text {
			margin-left: 16rpx;

			.real-name {
				display: flex;
				align-items: center;

				margin-top: 12rpx;

				view {
					display: flex;
					align-items: center;

					text:first-child {
						font-weight: 400;
						font-size: 22rpx;
						color: #808080;
					}

					text:last-child {

						// font-weight: bold;
						font-size: 28rpx;
						color: #CCA566;
					}


				}

				view:last-child {
					margin-left: 24rpx;
				}


			}

			.text-info {

				.name {
					font-weight: 600;
					font-size: 40rpx;
					margin-right: 16rpx;
				}

				.level {
					font-weight: 400;

				}

				.su {
					font-size: 24rpx;
					color: #E6E6E6;
					margin: 0rpx 5rpx;
				}

				.office {}
			}
		}
	}

	.time {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		text-align: center;
		border-bottom: 1rpx solid #E6E6E6;

		.time-item {
			font-size: 24rpx;

			.week {

				color: #B3B3B3;
			}

			.month {

				color: #1A1A1A;
				display: flex;
				justify-content: center;

				view {
					margin-top: 5rpx;
					width: 45rpx;
					height: 45rpx;
					border-radius: 50%;
					line-height: 45rpx;
					text-align: center;
				}

				.day-box {
					color: #fff;
					background: #CCA566;
				}
			}
		}

	}

	.color-h {
		color: #CCA566 !important;
	}

	.reservationCard-box {
		padding: 24rpx;
	}

	.reservationCard {
		width: 654rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background: rgba(245, 243, 240, 0.5);
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		.card-left {
			view {
				display: flex;
				align-items: center;
			}

			.left-bot {
				color: #808080;

				view:last-child {
					margin-left: 16rpx;
					color: #FF7C54;
				}
			}

			.left-top {
				.top-txt {
					font-weight: bold;
				}

				.top-btn {
					margin-left: 15rpx;
					width: 68rpx;
					height: 38rpx;
					font-size: 22rpx;
					color: #808080;


					justify-content: center;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
					border: 1rpx solid #808080;
				}
			}

			.left-bot {
				margin-top: 10rpx;
			}
		}
	}

	.btn {
		width: 176rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background: linear-gradient(270deg, #CCA566 0%, #CCA566 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		color: #FFFFFF;
	}

	.wenxi {
		width: 702rpx;
		margin: auto;
		font-size: 22rpx;
		color: #808080;

	}
</style>